<template>
  <div class="common-layout">
    <el-container class="container">
      <el-header class="header">
        <div class="img-wrap">
          <img
            src="https://element-plus.org/images/element-plus-logo.svg"
            alt=""
            style="width: 200px"
          />
        </div>
        <el-space size="large">
          <span>欢迎你，{{ username }}</span>
          <span class="exit" @click="exit"> 退出 </span>
        </el-space>
      </el-header>
      <el-container class="main">
        <el-aside :width="collapse ? '64px' : '200px'" class="aside">
          <el-menu
            :collapse="collapse"
            default-active="2"
            class="el-menu-vertical-demo"
            background-color="#33455a"
            text-color="#fff"
            active-text-color="#ffd04b"
            :router="true"
          >
            <el-menu-item index="/welcome">
              <el-icon><House /></el-icon>
              <span>欢迎页</span>
            </el-menu-item>
            <el-menu-item index="/swper">
              <el-icon><Picture /></el-icon>
              <span>轮播图管理</span>
            </el-menu-item>
            <el-menu-item index="/users">
              <el-icon><User /></el-icon>
              <span>用户管理</span>
            </el-menu-item>
            <el-sub-menu index="4">
              <template #title>
                <el-icon><ShoppingCart /></el-icon>
                <span>商品管理</span>
              </template>
              <el-menu-item index="/classify">
                <span>商品分类管理</span>
              </el-menu-item>
              <el-menu-item index="/detail">
                <span>商品详情管理</span>
              </el-menu-item>
            </el-sub-menu>
            <el-menu-item index="/charts">
              <el-icon><TrendCharts /></el-icon>
              <span>销量管理</span>
            </el-menu-item>
          </el-menu>
          <div class="bottom" @click="bottomClick">
            <el-icon v-if="!collapse"><ArrowLeft /></el-icon>
            <el-icon v-else><ArrowRight /></el-icon>
          </div>
        </el-aside>
        <el-main class="content">
          <RouterView />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import { useRouter } from "vue-router";
import { useUsersStore } from "@/stores/users";
import { computed, ref, onMounted, onBeforeUnmount } from "vue";

const router = useRouter();
const store = useUsersStore();

// 头部的用户名
const username = computed(() => store.username);
// 退出按钮
const exit = (): void => {
  localStorage.removeItem("token");
  router.push("/login");
};

// 左侧导航栏的折叠功能
const collapse = ref<boolean>(false);
const bottomClick = () => {
  collapse.value = !collapse.value;
};
// 监听屏幕宽度，来控制菜单栏是否折叠
onMounted(() => {
  window.addEventListener("resize", resize);
});
onBeforeUnmount(() => {
  window.removeEventListener("resize", resize);
});
const resize = () => {
  if (window.innerWidth >= 1000) {
    collapse.value = false;
  } else {
    collapse.value = true;
  }
};
</script>

<style lang="less">
.el-menu {
  border: none;
}
.common-layout {
  // 让这个元素的最低的高度，和屏幕高度一样
  // min-height: 100vh;

  .container {
    height: 100vh;
    display: flex;
    flex-direction: column;

    .header {
      background: #33455a;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #fff;

      .img-wrap {
        width: 180px;
        height: 100%;
        display: flex;
        background: #33455a;

        img {
          width: 150px;
          margin: auto;
        }
      }

      span {
        font-size: 18px;
      }

      .exit {
        cursor: pointer;
      }
    }

    .main {
      flex: 1;

      .aside {
        background-color: #33455a;
        position: relative;
        transition: all 1s;

        .bottom {
          position: absolute;
          left: 0;
          bottom: 0;
          width: 100%;
          height: 60px;
          background-color: aquamarine;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 30px;
          cursor: pointer;
        }
      }

      .content {
        // calc是一个css里面用于计算的辅助函数
        // 计算的运算符的左右都需要空格
        height: calc(100vh - 60px);
        overflow: auto;
      }
    }
  }
}
</style>
